<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
        margin: 0;
        padding: 0;
    }

    .tip {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: -160px;
        width: 140px;
        transition: all .5s linear;
        position: absolute;
        opacity: 1;
    }

    .container {
        background-color: #409e00;
        margin: 10px;
        height: 200px;
        width: 98%;
    }

    .trapezoid {
        width: 60px;
        height: 0;
        border-bottom: 25px solid #409eff;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        transform: rotate(90deg);
        margin-left: -23px;
    }

    .text {
        transform: rotate(-90deg);
        color: #fff;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        word-break: break-all;
        font-size: 12px;
    }

    .box {
        width: 160px;
        height: 220px;
        background-color: #fff;
        border: 1px solid #409eff;
        box-shadow:
            2.9px 3.4px 4.3px rgba(0, 0, 0, 0.033),
            7.2px 8.5px 10.9px rgba(0, 0, 0, 0.046),
            14.7px 17.4px 22.2px rgba(0, 0, 0, 0.057),
            30.3px 35.8px 45.6px rgba(0, 0, 0, 0.07),
            83px 98px 125px rgba(0, 0, 0, 0.1)
    }

    .box-item {
        width: 160px;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tip:hover {
        margin-left: 5px;
        float: left;
    }

    .edit-icon {
        background: url('./img/edit.png') no-repeat center;
    }

    .copy-icon {
        background: url('./img/copy.png') no-repeat center;
    }

    .head-icon {
        background: url('./img/head.jpg') no-repeat center;
    }

    .home-icon {
        background: url('./img/home.png') no-repeat center;
    }

    .share-icon {
        background: url('./img/share.png') no-repeat center;
    }

    .same-img {
        width: 30px;
        height: 30px;
        background-size: 100%;
        margin-left: 10px;
    }

    .text-detail {
        margin-right: 10px;
    }
</style>

<body>
    <hr />
    <div>
        <div class="tip">
            <div class="box">
                <div class="box-item">
                    <div class="edit-icon same-img"></div>
                    <span class="text-detail">edit</span>
                </div>
                <div class="box-item">
                    <div class="copy-icon same-img"></div>
                    <span class="text-detail">copy</span>
                </div>
                <div class="box-item">
                    <div class="head-icon same-img"></div>
                    <span class="text-detail">head</span>
                </div>
                <div class="box-item">
                    <div class="home-icon same-img"></div>
                    <span class="text-detail">home</span>
                </div>
                <div class="box-item">
                    <div class="share-icon same-img"></div>
                    <span class="text-detail">share</span>
                </div>
            </div>
            <div class="trapezoid">
                <div class="text">图例</div>
            </div>
        </div>
        <div class="container">
            <p>春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明。江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。江天一色无纤尘，皎皎空中孤月轮。</p>
        </div>
    </div>
</body>

</html>